<template>
  <div class="login-wrap">

    <div class="inputt" v-show="Ilogin">
    <el-form  label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container inp">
      <h3 class="title">LOGIN</h3>
      <el-form-item prop="userName">
        <el-input class="elinput" type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="elinput" type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox><span class="texst" @click="IbackS()">找回密码</span><span @click="IregisteredS()" class="texst">注册</span>
      <el-form-item style="width:100%;">
        <el-button class="subimts" type="primary" style="width:100%;" @click="submitForm()" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>

    </div>
    <div class="inputt" v-show="Iregistered" >

    <el-form label-position="left" :model="InsertData" :rules="rules" ref="InsertData" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">用户注册</h3>
      <el-form-item prop="userName">
        <el-input class="elinput"  type="text" v-model="InsertData.userName" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="elinput"  type="password" v-model="InsertData.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
<!--      <el-form-item prop="password">-->
<!--        <el-input type="password" v-model="InsertData.password" auto-complete="off" placeholder="再次确认密码"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item prop="email">
        <el-input class="emaill" type="text" v-model="InsertData.email" auto-complete="off" placeholder="绑定邮箱"></el-input>
        <a class="verificationss" v-show="verShow" @click="handleClick()">点击获取验证码</a>
        <a class="verificationss" v-show="!verShow"><span>{{timer}}</span>秒后重新获取</a>
      </el-form-item>
      <el-form-item prop="verification">
        <el-input type="text" class="emailltext" v-model="InsertData.verification" auto-complete="off" placeholder="验证码"></el-input><span @click="IloginS()" class="texst">前往登录</span>
      </el-form-item>
      <el-form-item>

     </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" class="subimts" style="width:100%;" @click="insertUser()" :loading="logining">注册</el-button>
      </el-form-item>
    </el-form>
    </div>


    <div class="inputt"  v-show="Iback">
    <el-form   label-position="left" :model="InsertData" :rules="rules" ref="InsertData" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">找回密码</h3>
      <el-form-item prop="userName">
        <el-input class="elinput"  type="text" v-model="InsertData.userName" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="elinput"  type="password" v-model="InsertData.password" auto-complete="off" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <!--      <el-form-item prop="password">-->
      <!--        <el-input type="password" v-model="InsertData.password" auto-complete="off" placeholder="再次确认密码"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item prop="email">
        <el-input class="emaill" type="text" v-model="InsertData.email" auto-complete="off" placeholder="你绑定的邮箱"></el-input>
        <a class="verificationss" v-show="verShow" @click="handleClick()">点击获取验证码</a>
        <a class="verificationss" v-show="!verShow"><span>{{timer}}</span>秒后重新获取</a>
      </el-form-item>
      <el-form-item prop="verification">
        <el-input type="text" class="emailltext" v-model="InsertData.verification" auto-complete="off" placeholder="验证码"></el-input><span  @click="IloginS()" class="texst">前往登录</span>
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" class="subimts" style="width:100%;" @click="back()" :loading="logining">修改密码</el-button>
      </el-form-item>
    </el-form>

    </div>



  </div>





</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'


import { mapMutations } from 'vuex';
export default {
  name: 'login',
  data() {
    return {
      Ilogin:true,
      Iregistered:false,
      Iback:false,
      userToken:'',
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      ruleForm: {
        //username和password默认为空
        userName: '',
        password:  '' ,

      },

      InsertData:{},
      //rules前端验证
      rules: {
        userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        verification: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      verShow:true,
      timer:60, //短信验证码

      BtnStatus: true,
      countDownTime: 60,


    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // this.$message({
    //   message: '账号密码及验证码不为空即可',
    //   type: 'success'
    // })
    // 获取图形验证码
    // this.getcode()
    //自动登录
   this.submitForm()

    // 获取存在本地的用户名密码
    this.getuserpwd()



  },
  //页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },
  // 里面的函数只有调用才会执行
  methods: {
    ...mapMutations(['changeLogin']),


    //验证码
    handleClick(){
      //发送验证码
      this.verifications();
      var _this=this;
      _this.verShow = false;
      var auth_timer = setInterval(()=>{
        _this.timer--;
        if(this.timer<=0){
          _this.verShow = true;
          _this.timer=60
          clearInterval(auth_timer)
        }
      },1000)
    },



    //状态切换
    IloginS(){
      var _this=this;
      _this.Ilogin=true;
      _this.Iregistered=false;
      _this.Iback=false;
    },
    //注册
    IregisteredS(){
      var _this=this;
      _this.Ilogin=false;
      _this.Iregistered=true;
      _this.Iback=false;
    },
    //找回密码
    IbackS(){
      var _this=this;
      _this.Ilogin=false;
      _this.Iregistered=false;
      _this.Iback=true;
    },




   //找回修改密码
    back(){
      var _this=this;
      this.$axios.post(`/api/`,this.InsertData).then(response => {

      })
    },


    //获取验证码
    verifications(){
      var _this=this;
      this.$axios.post(`/api/user/emailQQ`,this.InsertData).then(response => {
        if(response.data.status="100022"){
          //发送成功
          _this.$message({
            message: '邮件发送成功,如果没收到请检查是否在垃圾箱',
            type: 'success'
          })
        }else {
          _this.$message({
            message: '系统错误,邮件发送失败',
            type: 'success'
          })
        }
      })
    },
    //注册
    insertUser(){
      var _this=this;
      this.$axios.post(`/api/user/regist`,this.InsertData).then(response => {
        if(response.data.status=100022){
          //发送成功
          _this.$message({
            message: '邮件发送成功,如果没收到请检查是否在垃圾箱',
            type: 'success'
          })
        }else if(response.data.status=100021) {
          _this.$message({
            message: '系统错误,邮件发送失败',
            type: 'success'
          })
        }else if (response.data.status="USERNAME"){
          _this.$message({
            message: '此用户名已经存在',
            type: 'success'
          })
        }else if(response.data.status="EMAIL"){
          _this.$message({
            message: '邮箱已经被绑定',
            type: 'success'
          })
        }
          })
    },

    // 获取用户名密码
    //已经设置 登录成功不能访问login
    getuserpwd() {
      if (getCookie('userName') != '' && getCookie('userPwd') != '') {
        this.ruleForm.userName = getCookie('userName')
        this.ruleForm.password = getCookie('userPwd')
        this.rememberpwd = true
      }
    },
    submitForm(){
      var _this = this
      this.logining = true


      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (_this.rememberpwd == true) {
        // console.log("checked == true");
        //传入账号名，密码，和保存天数3个参数
        _this.setCookie(_this.ruleForm.userName, _this.ruleForm.password, 7);
      }else {
        // console.log("清空Cookie");
        //清空Cookie
        _this.clearCookie();
      }


      //后台交互 登录
      this.$axios.post(`/api/user/login`,this.ruleForm).then(response => {

        if (response.data.status === "200") {
          this.logining = false
          //存token
          if (response.data.data!=null){
            _this.userToken=response.data.data;
            _this.changeLogin({ Authorization: _this.userToken });
          }
          this.$router.push({path: '/MenuHtml/discover'})
          _this.$message({
            message: '登录成功',
            type: 'success'
          })

        } else {
          this.logining = false
          _this.$message({
            message: '登录失败',
            type: 'success'
          })

        }

      })
    },

   // // 获取info列表
   //  submitForm2(formName) {
   //    this.$refs[formName].validate(valid => {
   //      if (valid) {
   //        this.logining = true
   //        // 测试通道，不为空直接登录
   //        // setTimeout(() => {
   //        //   this.logining = false
   //        //   this.$store.commit('login', 'true')
   //        //   this.$router.push({ path: '/goods/Goods' })
   //        // }, 1000)
   //        // 注释
   //        login(this.ruleForm).then(res => {
   //          if (res.success) {
   //            if (this.rememberpwd) {
   //              //保存帐号到cookie，有效期7天
   //              setCookie('user', this.ruleForm.username, 7)
   //              //保存密码到cookie，有效期7天
   //              setCookie('pwd', this.ruleForm.password, 7)
   //            } else {
   //              delCookie('user')
   //              delCookie('pwd')
   //            }
   //            //如果请求成功就让他2秒跳转路由
   //            setTimeout(() => {
   //              this.logining = false
   //              // 缓存token
   //             // localStorage.setItem('logintoken', res.data.token)
   //              // 缓存用户个人信息
   //              localStorage.setItem('userdata', JSON.stringify(res.data))
   //              this.$store.commit('login', 'true')
   //              this.$router.push({ path: '/goods/Goods' })
   //            }, 1000)
   //          } else {
   //            this.$message.error(res.msg)
   //            this.logining = false
   //            return false
   //          }
   //        })
   //      } else {
   //        // 获取图形验证码
   //        this.getcode()
   //        this.$message.error('请输入用户名密码！')
   //        this.logining = false
   //        return false
   //      }
   //    })
   //  },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('='); //再次切割
          //判断查找相对应的值
          if (arr2[0] == 'userName') {
            this.ruleForm.userName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == 'userPwd') {
            this.ruleForm.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  }
}
</script>

<style scoped>
  .elinput{
    width: 300px !important;
  }


  .subimts{
    background: #8360c3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: 0px!important;
  }

  .inputt{
    width: 500px;

    height:400px;
    margin: 0 auto
  }

  .verificationss{
    margin-left: 5px;
  }
  .emaill{
    width: 60%;
  }
  .emailltext{
    width: 40%;
  }
  .texst{
    font-size: 0.8em;
    color: #5f9cef;
    float: right;
    margin-right: 5px;
    margin-top: 3px;
  }



.login-wrap {
  box-sizing: border-box;
  width: 100% !important;
  height: 100%!important;
  padding-top: 10%!important;
  /*background-image: url();*/
 background-image: url("https://s2.ax1x.com/2020/03/01/3gutrq.jpg");
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100% 100%;
}
  /*.login-wrap::after {*/
  /*  content: "";*/
  /*  background: url("https://s2.ax1x.com/2020/03/01/3guCVK.jpg");*/
  /*  opacity: 0.5;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  bottom: 0;*/
  /*  right: 0;*/
  /*  position: absolute;*/
  /*  z-index: -1;*/
  /*}*/





.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  /*box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);*/
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}


</style>
